<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>注册 & 登录</title>

  <!-- 引入外部 CSS 文件 -->
  <link rel="stylesheet" href="css/login.css">

</head>
<body>
<div class="auth-container">
    <!-- 注册表单 -->
    <div class="form-container" id="register-form">
        <h2>HuangBenBen'Ai PROJECT</h2>
        <form id="register-form" onsubmit="registerUser(event)">
            <!-- 用户名输入框 -->
            <input type="text" id="register-username" name="username" placeholder="请输入用户名" required>

            <!-- 邮箱输入框和验证码按钮的容器 -->
            <div class="email-container">
                <input type="email" id="register-email" name="email" placeholder="请输入邮箱" required>
                <button type="button" id="send-code-btn" onclick="sendVerificationCode()">发送验证码</button>
            </div>

            <!-- 密码输入框 -->
            <input type="password" id="register-password" name="password" placeholder="请输入密码" required>

            <!-- 确认密码输入框 -->
            <input type="password" id="confirm-password" name="confirm-password" placeholder="请确认密码" required>

            <!-- 邮箱验证码输入框 -->
            <input type="text" id="email-code" name="code" placeholder="请输入邮箱验证码" required>

            <!-- 注册按钮 -->
            <button type="submit">注册</button>
        </form>
        <p>已有账号？ <a href="javascript:void(0)" onclick="toggleForms()">登录</a></p>
    </div>

    <!-- 登录表单 -->
    <div class="form-container" id="login-form" style="display: none;">
        <h2>快登陆体验吧！</h2>
        <form onsubmit="loginUser(event)">
            <!-- 用户名输入框 -->
            <input type="text" id="login-username" name="username" placeholder="请输入用户名" required>

            <!-- 密码输入框 -->
            <input type="password" id="login-password" name="password" placeholder="请输入密码" required>

            <!-- 登录按钮 -->
            <button type="submit">登录</button>
        </form>
        <p>没有账号？ <a href="javascript:void(0)" onclick="toggleForms()">注册</a></p>
    </div>
</div>

<script>
    // 切换注册和登录表单
    function toggleForms() {
        var registerForm = document.getElementById('register-form');
        var loginForm = document.getElementById('login-form');

        if (registerForm.style.display === "none") {
            registerForm.style.display = "block";
            loginForm.style.display = "none";
        } else {
            registerForm.style.display = "none";
            loginForm.style.display = "block";
        }
    }

    // 发送验证码函数
    function sendVerificationCode() {
        var email = document.getElementById('register-email').value;
        var sendCodeBtn = document.getElementById('send-code-btn');

        // 如果邮箱为空，提醒用户输入邮箱
        if (!email) {
            alert('请输入邮箱');
            return;
        }

        // 创建表单数据
        var formData = new FormData();
        formData.append("email", email);

        // 向后端发送请求
        fetch('http://127.0.0.1:8888/login/sendCode', {
            method: 'POST',
            body: formData,  // 使用表单数据
        })
            .then(response => response.json())  // 解析JSON响应
            .then(data => {
                // 检查后端返回的响应
                if (data.code === 200 && data.data === true) {
                    // 验证码发送成功，开始倒计时
                    startCountdown(sendCodeBtn);
                } else {
                    // 验证码发送失败，显示失败信息
                    alert(data.message || '验证码发送失败，请稍后重试');
                }
            })
            .catch(error => {
                // 请求失败时的错误处理
                alert('发生错误，请稍后重试');
                console.error('Error sending verification code:', error);
            });
    }

    // 倒计时功能
    function startCountdown(button) {
        var countdownTime = 60; // 倒计时60秒
        button.disabled = true; // 禁用按钮
        button.innerText = countdownTime + 's'; // 显示倒计时

        // 每秒更新倒计时
        var countdownInterval = setInterval(function() {
            countdownTime--;
            button.innerText = countdownTime + 's';
            if (countdownTime <= 0) {
                clearInterval(countdownInterval); // 清除倒计时
                button.disabled = false; // 启用按钮
                button.innerText = '发送验证码'; // 恢复按钮文字
            }
        }, 1000);
    }

    // 注册用户的函数
    function registerUser(event) {
        event.preventDefault();  // 阻止默认表单提交

        var email = document.getElementById('register-email').value;
        var loginName = document.getElementById('register-username').value;
        var password = document.getElementById('register-password').value;
        var confirmPassword = document.getElementById('confirm-password').value;
        var code = document.getElementById('email-code').value;

        // 校验两次密码是否一致
        if (password !== confirmPassword) {
            alert('两次输入的密码不一致');
            return;
        }

        // 创建请求数据
        var reqData = {
            email: email,
            loginName: loginName,
            pwd: password,
            confirmPwd: confirmPassword,
            code: code
        };

        // 向后端发送注册请求
        fetch('http://127.0.0.1:8888/login/register', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(reqData),  // 转换为JSON字符串
        })
            .then(response => response.json())  // 解析JSON响应
            .then(data => {
                // 检查后端返回的响应
                if (data.code === 200 && data.data === true) {
                    // 注册成功，跳转到登录页面
                    // alert('注册成功，请登录！');
                    toggleForms(); // 切换到登录表单
                } else {
                    // 注册失败，显示失败信息
                    alert(data.message || '注册失败，请稍后重试');
                }
            })
            .catch(error => {
                // 请求失败时的错误处理
                alert('发生错误，请稍后重试');
                console.error('Error registering user:', error);
            });
    }

    // 登录请求函数
    async function loginUser(event) {
        event.preventDefault(); // 阻止表单默认提交行为

        // 获取表单输入值
        const email = document.getElementById('login-username').value;
        const password = document.getElementById('login-password').value;

        // 调用后端登录接口
        try {
            const response = await fetch('http://127.0.0.1:8888/login/userLogin', { // 根据你的后端接口地址修改
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({ email, pwd: password }) // 发送用户的 email 和 password
            });

            // 处理后端返回的响应
            if (response.ok) {
                const data = await response.json(); // 获取返回的 JSON 数据
                if (data.data && data.data.token) {
                    // 登录成功，保存 token 到 localStorage
                    localStorage.setItem('authToken', data.data.token);
                    localStorage.setItem('userId', data.data.userId);
                    localStorage.setItem('userName', data.data.userName);

                    // 登录成功后跳转到用户主页面
                    // alert('登录成功！');
                    window.location.href = '/aiQuestion.html'; // 跳转到主页面
                } else {
                    alert('登录失败：未获取到 token');
                }
            } else {
                const errorData = await response.json();
                alert('登录失败：' + (errorData.message || '未知错误'));
            }
        } catch (error) {
            console.error('登录请求失败:', error);
            alert('登录失败，请重试');
        }
    }

    // 页面加载时检查是否已有 token
    window.onload = function () {
        const token = localStorage.getItem('authToken');
        if (token) {
            // 如果有 token，跳转到主页面
            window.location.href = '/aiQuestion.html';
        }
    }
</script>
</body>
</html>
